<template>
    <div class="mform">
        <div class="back">
            <div class="form-btn">
                    <el-button type="primary" @click="save()">保存</el-button>
                </div>
        </div>
        <div class="form-content" style="padding: 10px;">
            <el-form ref="formRef" :model="form" :rules="rules" :label-position="'left'" label-width="auto">

                <el-row :gutter="10" class="main-row">
                    <el-col :span="8" v-for="(item, index) in form.config" :key="index">
                        <el-card>
                            <el-form-item label="充值面额" :prop="'config.' + index + '.amount'"
                                :rules="{ required: true, message: '请输入需要充值面额', trigger: 'blur' }">
                                <el-input v-model="item.amount" placeholder="请输入需要充值面额" clearable />
                            </el-form-item>
                            <el-form-item label="赠送金额" :prop="'config.' + index + '.gift'"
                                :rules="{ required: true, message: '请输入赠送的金额', trigger: 'blur' }">
                                <el-input v-model="item.gift" placeholder="请输入赠送的金额" clearable />
                            </el-form-item>
                        </el-card>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="" prop="data">
                            <el-input v-model="form.data" :autosize="{ minRows: 6 }" type="textarea"
                                placeholder="会员充值说明" clearable />
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </div>
    </div>
</template>
<script setup name="RechargeConfig">
const { proxy } = getCurrentInstance()

const formRef = ref();
const form = reactive({
    id: '', config: [
        { amount: '', gift: '', type: '1' },
        { amount: '', gift: '', type: '1' },
        { amount: '', gift: '', type: '1' },
        { amount: '', gift: '', type: '1' },
        { amount: '', gift: '', type: '1' },
        { amount: '', gift: '', type: '1' },
    ], data: ''
});
//验证规则
const rules = {
    // 'item.amount': [{ required: true, message: '请输入充值面额', trigger: 'blur' }],
    // 'item.gift': [{ required: true, message: '请输入赠送金额', trigger: 'blur' }],
};
//保存
async function save() {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let res = await proxy.$post('RechargeRecordConfigSave', form)
            if (res.code === 0) {
                ElMessage({ type: 'success', message: '保存成功' });
                // proxy.$bus.emit('back');
            }
        }
    });
}

onMounted(() => {
    getDetail()
});

async function getDetail(id) {
    let res = await proxy.$post('RechargeRecordConfig', {}, false)
    if (res.code === 0) {
        if(!res.data.config) {
            res.data.config = form.config
        }
        Object.assign(form, res.data);
    }
}

</script>
<style scoped lang="scss">
.main-row {
    .el-col {
        margin-bottom: 10px;
    }
}

.form-btn{
    width: 100%;
    padding: 10px 10px 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>